iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
Modern Web

33歲轉職者的前端筆記系列 第 12

33歲轉職者的前端筆記-DAY 12 一些網頁切版技巧的小筆記-Part 3

  • 分享至 

  • xImage
  •  

排版小技巧

  • 比較早期的排版都是用表格(table)的方式來排版,現在不會用表格(table)的方式來排版了,而是用div。

  • div = 原文: Division,簡單來說就是版塊、區塊的意思,可以決定元素的大小, 最常拿來排版的標籤。

  • 看標籤 的小技巧:可以展開折起來看,code 旁邊有個小箭頭可以按一下隱藏裡面的 code , 一層一層慢慢看,比較不會亂掉跟眼花。

  • chorme 的檢查會很常用,找 bug 會用他來查

  • {}特殊的選擇器,全部標籤都能選到

  • border: 1px solid black; 框線:大小、樣式、顏色

讓畫面有邊界線語法(方便排版):

{
   border: 1px solid black;
} 

版面寬度應用

  • 計算寬度的方法:width: calc(100%/3); 可以不用計算需要幾px,可以直接裡面計算。
  • width: 100%; 所在的容器把他填滿不是符合版面大小
  • flex:可以解讀成靈活的箱子
  • dlisplay:顯示模式
  • display: flex;讓內部第一層元素左右並排 ,會自動抓裡面的寬度
  • flex-wrap: wrap;裡面的寬度不要自動縮放,放不下就換行
  • padding: 30px 10px;對內留白:上下 左右 */
  • padding: 15px; 上下左右都是留白15px
  • 網頁檢查工具:綠色:padding 橘色:marging

上一篇
33歲轉職者的前端筆記-DAY 11 一些網頁切版技巧的小筆記-Part 2
下一篇
33歲轉職者的前端筆記-DAY 13 圖片格式及影音格式
系列文
33歲轉職者的前端筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言